<template>
   <div class="indexHomePage_box">
    <div class="indexHomePage_box_left">
      <div class="indexHomePage_box_left_top">
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="item in imgList" :key="item.id">
            <img style="height:100%;width:100%;" alt="图片丢失了" :src="item.src" />
            <div class="text">{{ item.title }}</div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="indexHomePage_box_left_bottom">
        <div class="tableSwitch">
          <div :class="isShow ? 'tableSwitch_db' : 'tableSwitch_db1'" @click="dbSwitch()">我的待办</div>
          <div :class="isShow ? 'tableSwitch_yb' : 'tableSwitch_yb1'" @click="ybSwitch()">我的已办</div>
          <div class="tableSwitch_more">更多 > ></div>
        </div>
        <div class="dbTable">
          <el-table :data="tableData" v-loading="loading" height="100%" :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }">
            <el-table-column fixed prop="xh" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="rwlx" label="任务类型" width="120">
            </el-table-column>
            <el-table-column label="任务名称">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top" popper-class="popoverBackB">
                  <p>{{ scope.row.rwmc }}</p>
                  <div slot="reference">
                    <span class="ellipsis">{{ scope.row.rwmc }}</span>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="fqsj" label="任务发起时间">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="60">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">处理</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <div class="indexHomePage_box_right">
      <div class="indexHomePage_box_right_top">
        <div class="indexHomePage_box_right_top_tag">
          <div class="tagyw">党建要闻</div>
          <div class="tableSwitch_more">更多 > ></div>
        </div>
        <div class="indexHomePage_box_right_title">
          <h2 class="ywTitle">公司质量文化塑造与产品品质提升工作动态报道（一）</h2>
          <span class="ywTitle2">2025年8月14日，重庆中车常客轨道车辆有限公司各职能部门，针对质量文化塑造的部署工作计划的情况开展专项推进会，各部门针对自身提升项点进行了汇报。</span>
          <div class="ywList">
            <i class="iconfont icon-dayu"></i>
            <div class="ywList_title">初心如涅担使命 重庆中车长客公司党委开展7.17主题党日系列活动</div>
            <div class="ywList_date">2025-07-25</div>
          </div>
          <div class="ywList">
            <i class="iconfont icon-dayu"></i>
            <div class="ywList_title">党建领航创标杆 凝心聚力谱新篇 重庆中车长客公司召开2025年度“七一”表彰活动</div>
            <div class="ywList_date">2025-07-25</div>
          </div>
          <div class="ywList">
            <i class="iconfont icon-dayu"></i>
            <div class="ywList_title">追寻历史足迹 传承奋斗精神-采购党支部开展红色爱国主义教育活动</div>
            <div class="ywList_date">2025-07-25</div>
          </div>
          <div class="ywList">
            <i class="iconfont icon-dayu"></i>
            <div class="ywList_title">“牢记嘱托塑名片，质耀青春建新功”五四团日活动圆满举行</div>
            <div class="ywList_date">2025-07-25</div>
          </div>
          <div class="ywList">
            <i class="iconfont icon-dayu"></i>
            <div class="ywList_title">廉风聚力谋新篇</div>
            <div class="ywList_date">2025-07-25</div>
          </div>
        </div>
      </div>

      <div class="indexHomePage_box_right_bottom">
        <div class="indexHomePage_box_right_bottom1">
          <div class="indexHomePage_box_right_bottom1_tage">
            <div class="tztg">通知通告</div>
            <div class="tableSwitch_more">更多 > ></div>
          </div>
          <div class="ggList">
            <i class="iconfont icon-dayu"></i>
            <div class="ggList_title">关于组织学习宣扬杨景康同先进事迹的通知 </div>
            <div class="ggList_date">2025-07-25</div>
          </div>
          <div class="ggList">
            <i class="iconfont icon-dayu"></i>
            <div class="ggList_title">关于组织学习宣扬杨景康同先进事迹的通知 </div>
            <div class="ggList_date">2025-07-25</div>
          </div>
          <div class="ggList">
            <i class="iconfont icon-dayu"></i>
            <div class="ggList_title">关于组织学习宣扬杨景康同先进事迹的通知 </div>
            <div class="ggList_date">2025-07-25</div>
          </div>
        </div>
        <div class="indexHomePage_box_right_bottom2">
          <div class="indexHomePage_box_right_bottom2_tage">
            <div class="djgs">党建公式</div>
            <div class="tableSwitch_more">更多 > ></div>
          </div>
          <div class="gsList">
            <i class="iconfont icon-dayu"></i>
            <div class="gsList_title">关于组织学习宣扬杨景康同先进事迹的通知 </div>
            <div class="gsList_date">2025-07-25</div>
          </div>
          <div class="gsList">
            <i class="iconfont icon-dayu"></i>
            <div class="gsList_title">关于组织学习宣扬杨景康同先进事迹的通知 </div>
            <div class="gsList_date">2025-07-25</div>
          </div>
          <div class="gsList">
            <i class="iconfont icon-dayu"></i>
            <div class="gsList_title">关于组织学习宣扬杨景康同先进事迹的通知 </div>
            <div class="gsList_date">2025-07-25</div>
          </div>
          <div class="gsList">
            <i class="iconfont icon-dayu"></i>
            <div class="gsList_title">关于组织学习宣扬杨景康同先进事迹的通知 </div>
            <div class="gsList_date">2025-07-25</div>
          </div>
          <div class="video_box">
            <div class="video">
              <el-button class="common-el-button" type="primary" icon="el-icon-video-camera-solid">组装车间</el-button>
              <el-button class="common-el-button" type="primary" icon="el-icon-video-camera-solid">研发中心</el-button>
              <el-button class="common-el-button" type="primary" icon="el-icon-video-camera-solid">办公楼</el-button>
              <el-button class="common-el-button" type="primary" icon="el-icon-video-camera-solid">车体车间</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data () {
    return {
      imgList: [
        { id: 1, src: require('@/assets/carousel/1.jpg'), title: '初心如涅担使命 扬帆启新程 重庆中车长客公司党委开展' },
        { id: 2, src: require('@/assets/carousel/2.jpg'), title: '初心如涅担使命 扬帆启新程 重庆中车长客公司党委开展' },
        { id: 3, src: require('@/assets/carousel/3.jpg'), title: '初心如涅担使命 扬帆启新程 重庆中车长客公司党委开展' },
      ],
      isShow: 1,
      tableData: [{
        xh: '1',
        rwlx: '积分申报管理',
        rwmc: '蒋玉玲积分申报，党群核党',
        fqsj: '2025-09-04',
      },
      {
        xh: '2',
        rwlx: '积分申报管理',
        rwmc: '蒋玉玲积分申报，党群核党',
        fqsj: '2025-09-04',
      },
      {
        xh: '3',
        rwlx: '积分申报管理',
        rwmc: '蒋玉玲积分申报，党群核党',
        fqsj: '2025-09-04',
      },
      {
        xh: '4',
        rwlx: '积分申报管理',
        rwmc: '蒋玉玲积分申报，党群核党',
        fqsj: '2025-09-04',
      },
      ]
    }
  },
  methods: {
    // 切换菜单
    dbSwitch () {
      let a = this.isShow
      if (a == 0) {
        this.isShow = 1
      }
    },
    ybSwitch () {
      let a = this.isShow
      if (a == 1) {
        this.isShow = 0
      }
    }
  }
}
</script>

<style lang="less"  scoped>
.indexHomePage_box {
  display: flex;
  height: 100%;
  // border: 1px solid red;
}

.indexHomePage_box .indexHomePage_box_left {
  flex: 2;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.indexHomePage_box .indexHomePage_box_left .indexHomePage_box_left_top {
  flex: 3;
  height: 100%;
  width: 100%;
}

.indexHomePage_box .indexHomePage_box_left .indexHomePage_box_left_top .text {
  position: fixed;
  display: flex;
  align-items: center;
  bottom: 0;
  width: 100%;
  height: 30px;
  padding-left: 10px;
  background-color: rgb(24, 28, 35);
  color: white;
  font-size: 12px;
}

.indexHomePage_box .indexHomePage_box_left .indexHomePage_box_left_bottom {
  flex: 2;
  height: 100%;
  border: 1px solid #efefef;
  border-bottom: none;
}


.indexHomePage_box .indexHomePage_box_right {
  flex: 3;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 30px;
}

// 右盒子
.indexHomePage_box_right .indexHomePage_box_right_top {
  flex: 3;
  height: 100%;
  width: 100%;
  border: 1px solid #efefef;
  // border: 1px solid red;
  padding-bottom: 20px;
  margin-bottom: 10px;
}

.indexHomePage_box_right .indexHomePage_box_right_top .indexHomePage_box_right_title {
  padding-left: 1%;
  padding-right: 1%;
  // position: absolute;
}

.indexHomePage_box_right .indexHomePage_box_right_top .indexHomePage_box_right_title .ywTitle {
  color: rgb(204, 25, 48);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.indexHomePage_box_right .indexHomePage_box_right_top .indexHomePage_box_right_title .ywTitle2 {
  color: #999;
  font-size: 14px;
  display: flex;
  margin-top: -10px;
  padding-bottom: 10px;
  cursor: pointer;
}

.indexHomePage_box_right .indexHomePage_box_right_top .indexHomePage_box_right_title .ywList {
  display: flex;
  border-bottom: 1px dotted #999;
  padding-top: 1%;
  padding-bottom: 5px;
  cursor: pointer;
}

.ywList .ywList_title {
  color: #666;
  font-size: 14px;
  padding-left: 1%;
}

.ywList .ywList_date {
  position: absolute;
  right: 2%;
  color: #BBBBBB;

}

.icon-dayu {
  color: #666;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.indexHomePage_box_right .indexHomePage_box_right_top .indexHomePage_box_right_top_tag {
  position: relative;
  display: flex;
  width: 100%;
  height: 30px;
  background-color: rgb(250, 250, 250);
  border-bottom: 1px solid #efefef;
}

.tagyw {
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(204, 25, 48);
  color: white;
}

.tagyw::before {
  z-index: 999;
  content: "";
  display: block;
  position: absolute;
  left: 11px; //给小三角定位，更具实际需求调整
  top: 29px; //给小三角定位，更具实际需求调整
  border-width: 5px;
  border-style: solid dashed dashed dashed; //四个参数分别代表向下，左，上右的小三角(对应方向的小三角设置为solid，其他的为dashed。我这里演示向左的小三角，所以设置第二个）
  border-color: rgb(204, 25, 48) transparent transparent transparent; //四个参数分别代表向下，左，上右的小三角。对应方向的小三角设置你想要的颜色（为了直观我这里设置黑色），其他的为transparent。我这里演示向左的小三角，所以设置第二个。
}

.indexHomePage_box_right .indexHomePage_box_right_bottom {
  flex: 2;
  display: flex;
  // border: 1px solid red;
  // position: relative;
}

.indexHomePage_box_right_bottom1 {
  border: 1px solid #efefef;
  width: 49%;
  height: 293px;
}

.indexHomePage_box_right_bottom2 {
  border: 1px solid #efefef;
  width: 49%;
  margin-left: auto;
  overflow: hidden;
}

// 左下表格
.tableSwitch {
  position: relative;
  display: flex;
  width: 100%;
  height: 30px;
  background-color: rgb(250, 250, 250);
}

.tableSwitch .tableSwitch_db {
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(204, 25, 48);
  color: white;
  cursor: pointer;
}

.tableSwitch .tableSwitch_db::before {
  z-index: 999;
  content: "";
  display: block;
  position: absolute;
  left: 11px; //给小三角定位，更具实际需求调整
  top: 29px; //给小三角定位，更具实际需求调整
  border-width: 5px;
  border-style: solid dashed dashed dashed; //四个参数分别代表向下，左，上右的小三角(对应方向的小三角设置为solid，其他的为dashed。我这里演示向左的小三角，所以设置第二个）
  border-color: rgb(204, 25, 48) transparent transparent transparent; //四个参数分别代表向下，左，上右的小三角。对应方向的小三角设置你想要的颜色（为了直观我这里设置黑色），其他的为transparent。我这里演示向左的小三角，所以设置第二个。
}


.tableSwitch .tableSwitch_db1 {
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.tableSwitch .tableSwitch_yb {
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.tableSwitch .tableSwitch_yb1 {
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(204, 25, 48);
  color: white;
  cursor: pointer;
}

.tableSwitch .tableSwitch_yb1::before {
  z-index: 999;
  content: "";
  display: block;
  position: absolute;
  left: 90px; //给小三角定位，更具实际需求调整
  top: 29px; //给小三角定位，更具实际需求调整
  border-width: 5px;
  border-style: solid dashed dashed dashed; //四个参数分别代表向下，左，上右的小三角(对应方向的小三角设置为solid，其他的为dashed。我这里演示向左的小三角，所以设置第二个）
  border-color: rgb(204, 25, 48) transparent transparent transparent; //四个参数分别代表向下，左，上右的小三角。对应方向的小三角设置你想要的颜色（为了直观我这里设置黑色），其他的为transparent。我这里演示向左的小三角，所以设置第二个。
}


.tableSwitch_more {
  position: absolute;
  right: 1%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 12px;
  color: #999;
  cursor: pointer;
}

.indexHomePage_box_left_bottom .dbTable {
  height: 87%;
  width: 100%;
}

// hover
.ellipsis {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

// 右下
.indexHomePage_box_right_bottom1_tage {
  position: relative;
  display: flex;
  width: 100%;
  height: 30px;
  background-color: rgb(250, 250, 250);
  border-bottom: 1px solid #efefef;
}

.tztg {
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(204, 25, 48);
  color: white;
}

.tztg::before {
  z-index: 999;
  content: "";
  display: block;
  position: absolute;
  left: 11px; //给小三角定位，更具实际需求调整
  top: 29px; //给小三角定位，更具实际需求调整
  border-width: 5px;
  border-style: solid dashed dashed dashed; //四个参数分别代表向下，左，上右的小三角(对应方向的小三角设置为solid，其他的为dashed。我这里演示向左的小三角，所以设置第二个）
  border-color: rgb(204, 25, 48) transparent transparent transparent; //四个参数分别代表向下，左，上右的小三角。对应方向的小三角设置你想要的颜色（为了直观我这里设置黑色），其他的为transparent。我这里演示向左的小三角，所以设置第二个。
}

.indexHomePage_box_right_bottom1 .ggList {
  display: flex;
  padding-top: 10px;
  padding-left: 5px;
  padding-bottom: 5px;
  border-bottom: 1px dotted #999;
  margin-left: 1%;
  margin-right: 1%;

}

.ggList .ggList_title {
  color: #666;
  font-size: 14px;
  padding-left: 1%;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ggList .ggList_date {
  right: 2%;
  color: #BBBBBB;
  font-size: 14px;
  margin-left: auto;
  padding-right: 1%;
}

.indexHomePage_box_right_bottom2_tage {
  position: relative;
  display: flex;
  width: 100%;
  height: 30px;
  background-color: rgb(250, 250, 250);
  border-bottom: 1px solid #efefef;
}

.djgs {
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(204, 25, 48);
  color: white;
}

.djgs::before {
  z-index: 999;
  content: "";
  display: block;
  position: absolute;
  left: 11px; //给小三角定位，更具实际需求调整
  top: 29px; //给小三角定位，更具实际需求调整
  border-width: 5px;
  border-style: solid dashed dashed dashed; //四个参数分别代表向下，左，上右的小三角(对应方向的小三角设置为solid，其他的为dashed。我这里演示向左的小三角，所以设置第二个）
  border-color: rgb(204, 25, 48) transparent transparent transparent; //四个参数分别代表向下，左，上右的小三角。对应方向的小三角设置你想要的颜色（为了直观我这里设置黑色），其他的为transparent。我这里演示向左的小三角，所以设置第二个。
}

.indexHomePage_box_right_bottom2 .gsList {
  display: flex;
  padding-top: 10px;
  padding-left: 5px;
  padding-bottom: 5px;
  border-bottom: 1px dotted #999;
  margin-left: 1%;
  margin-right: 1%;

}

.gsList .gsList_title {
  color: #666;
  font-size: 14px;
  padding-left: 1%;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gsList .gsList_date {
  right: 2%;
  color: #BBBBBB;
  font-size: 14px;
  margin-left: auto;
  padding-right: 1%;
}

.video_box {
  margin-top: 10px;
  height: 83px;
  width: 100%;
  display: flex;
}

.video_box .video {
  width: 100%;
  height: 100%;
  margin-right: 5px;
  margin-left: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.common-el-button {
  width: 90px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-button+.el-button,
.el-checkbox.is-bordered+.el-checkbox.is-bordered {
  margin-left: 0;
}
</style>
